<!--
 * @Author: gyp
 * @Date: 2020-06-04 16:34:45
 * @LastEditors: gyp
 * @LastEditTime: 2020-06-18 13:06:26
 * @Description: 处警情况弹出框
 * @FilePath: \sy_kjxc_web\src\views\screen\components\dealsituationDialog.vue
-->
<template>
  <div class="dealSituation">
    <el-dialog title="平均处警时长" :visible.sync="visible" @closed="onClosed" custom-class="blue">
      <div class="content">
        <div class="statisWrap">
          <div class="title">处警情况一览</div>
          <el-scrollbar class="scrollerWrap">
            <div
              :class="['platformInfo', {'active': index === curIndex}]"
              v-for="(item, index) in platformVoList"
              :key="index"
              @click="changeTable(index, item)"
            >
              <div class="basic">
                <div>{{ item.platformName }}</div>
                <div>{{ item.useTime }}</div>
              </div>
            </div>
          </el-scrollbar>
        </div>
        <div class="tableWrap">
          <el-table
            :data="tableDetailList"
            border
            class="blueTable"
            style="width:100%;max-height:6.16rem;overflow-y:auto;"
          >
            <el-table-column prop="useTime" label="时长" />
            <el-table-column prop="cjtime" label="接警时间" />
            <el-table-column prop="djtime" label="到警时间" />
            <el-table-column prop="userName" label="处警民警" />
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { formateTime } from '@/utils/common.js';
export default {
  name: 'dealsituation-dialog',
  data () {
    return {
      visible: true,
      curIndex: 0,
      platformVoList: [],
      tableDetailList: []
    };
  },
  created () {
    this.getAvgDealAlertTime();
  },
  methods: {
    getAvgDealAlertTime () {
      this.$api.screen.avgDealAlertTime().then(res => {
        if (res.data.data) {
          this.platformVoList = res.data.data.platformVoList.map(item => {
            item.useTime = formateTime(item.useTime);
            if (item.userVoList && item.userVoList.length) {
              item.userVoList.map(every => {
                every.useTime = formateTime(every.useTime);
              });
            }
            return item;
          });
          // 首次初始化
          if (this.platformVoList[0].userVoList) {
            this.tableDetailList = this.platformVoList[0].userVoList;
          } else {
            this.tableDetailList = [];
          }
        }
      });
    },
    changeTable: function (index, row) {
      const { userVoList } = row;
      this.curIndex = index;
      if (userVoList) {
        this.tableDetailList = userVoList;
      } else {
        this.tableDetailList = [];
      }
    },
    onClosed () {
      this.$emit('onDealsituaClose');
    }
  }
};
</script>

<style lang="less" scoped>
  .content {
    display: flex;
    height: 618px;
    .statisWrap {
      width: 280px;
      height: 100%;
      border: 1px solid #1e6abc;
      box-shadow: 0 0 5px #1e6abc;
      .title {
        width: 100%;
        width: 100%;
        height: 48px;
        color: #25f3e6;
        line-height: 48px;
        font-size: 18px;
        padding: 0 10px;
        color: #25f3e6;
      }
      .scrollerWrap {
        width: 100%;
        height: calc(100% - 48px);
        padding: 0 5px;
        .platformInfo {
          border: 1px solid #1e6abc;
          margin-bottom: 10px;
          color: #fff;
          &.active {
            background: #152e53;
          }
          &:hover {
            box-shadow: 0 0 5px #1e6abc;
            text-shadow: 0 0 3px #fff;
          }
          .basic {
            display: flex;
            justify-content: space-between;
            padding: 10px;
            font-size: 16px;
            cursor: pointer;
          }
        }
      }
    }
    .tableWrap {
      width: calc(100% - 300px);
      margin-left: 20px;
      height: 100%;
    }
  }
</style>
